<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>

		<button id="getImage">获取本地图片</button>
		<button id="seeImage">浏览本地图片</button>
		<img src="" id="img"/>
		
		<!--引入微信官方sdk库文件-->
		<!--引入JS接口的页面引入如下JS文件-->
		<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>

		<!--vconsole工具-->
		<script src="js/vconsole.min.js" type="text/javascript" charset="utf-8"></script>

		<!--微信配置工具-->
		<script src="js/bj_wechat.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			//本地缓存的的图片id
			var localIds;
			/*
			 * 1.申请公众号
			 * 2.申请JSSDK库文件，引入线上的
			 * 
			 * 需要前端SDK配置。。。。》自己服务器拿验证。。。》到微信服务器拿签名随机字符串
			 * 				《===					 《。。。
			 * 3.使用wx.config配置页面的微信api功能，前提条件是从服务器拿到必填数据
			 * 
			 * npm install demo_bluej_wx			 
			 */

			//3.1请求初始化JSSDK需要数据  异步！！
			Utils.get(API.GET_JSSDK, {}, function(res) {
				//将JSON字符串转化为对象
				res = JSON.parse(res);
				console.log(res)

				//初始化
				wx.config({
					debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: res.data.appId, // 必填，公众号的唯一标识
					timestamp: res.data.timestamp, // 必填，生成签名的时间戳
					nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
					signature: res.data.signature, // 必填，签名，见附录1
					jsApiList: [
						"chooseImage",
						"chooseImage"
					] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				});

				//config信息验证后会执行ready方法，所有接口调用必须在config接口获得结果之后，
				wx.ready(function() {
					//获取本地图片
					document.getElementById("getImage").addEventListener("click", function() {

						wx.chooseImage({
							count: 1, // 默认9
							sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
							success: function(res) {
								console.log(res)
								var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
							}
						});

					});
				});
				wx.ready(function() {
					document.getElementById("seeImage").addEventListener("click", function() {
						wx.getLocalImgData({
							localId: localIds[0], // 图片的localID
							success: function(res) {
								console.log(res)
								var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
								//读取图片资源的base64数据，可直接赋值给img标签的src属性上
								document.querySelector("#img").src=res.localData;
							}
						});
					})
				})
			})
		</script>
	</body>

</html>